<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>快递管理系统</title>
    <meta name="Copyright" content="Douco Design."/>
    <link href="css/public.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
</head>
<body>
<div id="dcWrap">

    <div id="dcMain">
        <!-- 当前位置 -->
        <div id="manager" class="mainBox" style="height:auto!important;height:550px;min-height:550px;">
            <h3>用户登陆</h3>
            <form action="https://www.baidu.com" method="post">
                <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
                    <tr>
                        <td width="100" align="right">用户名</td>
                        <td>
                            <input id="usernameInput" type="text" name="account" size="40" class="inpMain"/>

                            <span id="accountMsg">&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right">密码</td>
                        <td>
                            <input id="userPwdInput" type="password" name="password" size="40" class="inpMain"/>

                            <span id="passwordMsg">&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input id="submitBtn" type="submit" name="submit" class="btn" value="登录"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    <div id="dcFooter">
        <div id="footer">
            <div class="line"></div>
            <ul>
                版权所有 © 2024-2025 尚硅谷教育，并保留所有权利。
            </ul>
        </div>
    </div><!-- dcFooter 结束 -->
    <div class="clear"></div>
</div>
</body>
<script>
    // 为了把提示信息进行统一维护，声明相关常量
    const ACCOUNT_MSG_SUCCESS = "<span style='color:blue;font-weight: bolder;'>用户名校验通过，可以使用</span>";
    const ACCOUNT_MSG_FAILED = "<span style='color:red;font-weight: bolder;'>用户名格式不正确</span>";
    const PASSWORD_MSG_SUCCESS = "<span style='color:blue;font-weight: bolder;'>密码校验通过，可以使用</span>";
    const PASSWORD_MSG_FAILED = "<span style='color:red;font-weight: bolder;'>密码格式不正确</span>";

    // 1、针对用户名进行表单验证
    // [1]获取用户名文本框元素对象
    let userNameInputEle = document.getElementById("usernameInput");

    // 检查点：console.log(userNameInputEle);

    // [2]给文本框元素对象值改变事件绑定响应函数
    // 值改变事件触发需要满足两个条件：
    // ●一个是表单项中的值确实发生了改变
    // ●另一个条件是表单项失去了焦点
    userNameInputEle.onchange = function () {
        // 检查点：alert("aaaaa");

        // [3]获取文本框中用户输入的数据
        // this 本身的含义：指向调用当前函数的对象
        // this 在事件响应函数中：指向当前触发事件的控件（当前代码中就是文本框）
        let userName = this.value;
        // 检查点：console.log(userName + "~~~");

        // [4]创建正则表达式对象，设置用户名格式要求
        let reg = /^[A-Za-z_][A-Za-z0-9_]{4,9}$/;

        // [5]使用正则表达式对用户名进行格式验证
        let checkResult = reg.test(userName);
        // 检查点：console.log(checkResult?"校验通过":"校验不通过");

        // [6]把验证结果信息显示到对应的位置
        // 具体来说就是 id 为 accountMsg 的 span 标签，下面通过 DOM API 获取
        let accountMsgEle = document.getElementById("accountMsg");

        // 设置 span 标签的文本标签体
        accountMsgEle.innerHTML = checkResult ? ACCOUNT_MSG_SUCCESS : ACCOUNT_MSG_FAILED;
    };

    // 2、针对密码框进行表单验证
    let passwordInputEle = document.getElementById("userPwdInput");
    passwordInputEle.onchange = function () {
        let checkMsg = /^[A-Za-z0-9_]{6,12}$/.test(this.value) ? PASSWORD_MSG_SUCCESS : PASSWORD_MSG_FAILED;
        document.getElementById("passwordMsg").innerHTML = checkMsg;
    };

    // 3、提交表单时，进行表单验证
    document.getElementById("submitBtn").onclick = function (){

        // 检查点：alert("提交表单");

        // ※发现新的问题：表单提交按钮本身的功能就是点击之后提交表单
        // 但是现在我们提交表单是有条件的：验证通过才能提交
        // 那么我们如何控制表单是否提交？
        // 答案是：在不想让表单提交时，做一个操作——阻止控件默认行为
        // 控件的默认行为指什么？
        // ●点击表单提交按钮会提交表单
        // ●点击超链接会跳转页面
        // 阻止控件默认行为的代码是：
        // event.preventDefault();

        // [1]验证用户名输入框
        let userNameCheckResult = /^[A-Za-z_][A-Za-z0-9_]{4,9}$/.test(userNameInputEle.value);

        // [2]验证密码输入框
        let passwordCheckResult = /^[A-Za-z0-9_]{6,12}$/.test(passwordInputEle.value);

        // [3]总体做一个判断：用户名和密码任何一个验证不通过就阻止表单提交
        if (!userNameCheckResult || !passwordCheckResult) {
            alert("表单验证不通过");
            event.preventDefault();
        }
    };
</script>
</html>